<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .big{
            width:480px;
            height:480px;
            border: 1px black solid;
        }

        .small{
            width:28px;
            height:28px;
            border:1px solid black;
            float:left;
        }

        .bg{
            background-color: yellowgreen;
        }

        .bg-active{
            background-color:gold;
        }


    </style>
</head>
<body>
    <div class="big" id="big"></div>
</body>
<script>
    var inti = function()
    {
        var big = document.getElementById("big");
            for(var i=1;i<=256;i++)
            {
                var div=document.createElement("div");
                div.className="small bg";
                // big.appendChild(div);
                div.onmouseover=function()
                {
                    this.className="small bg-active";
                }
                div.onmouseout=function()
                {
                    this.className="small bg";
                }
                var a=function(k)
                {
                    div.onclick=function()
                    {
                        alert(k);
                    }
                }
                a(i);
                big.appendChild(div);
            }
            if(true){
                console.log(i);
            }
    }
    inti();
</script>
</html>